<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="/static/css/layui.css">
</head>
<body>

<!-- -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">XXX系统</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">菜单1</a></li>
            <li class="layui-nav-item layui-this"><a href="">菜单2</a></li>
            <li class="layui-nav-item"><a href="">菜单3</a></li>


            <li class="layui-nav-item">
                <a href="JavaScript:;">菜单4</a>
                <dl class="layui-nav-child">
                    <dd><a href="">子菜单1</a></dd>
                    <dd><a href="">子菜单2 </a></dd>
                    <dd><a href="">子菜单3 </a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                {% if not is_login %}
                <a href="/login">
                    登录
                </a>
                {% else %}
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                     admin//
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">个人中心</a></dd>
                    <dd><a href="javascript:;">设置</a></dd>
                    <dd><a href="/logout">退出</a></dd>
                </dl>
                {% endif %}
            </li>
        </ul>
    </div>
  </div>
    </div>
</div>
<script src="/static/layui.js"></script>



<!--&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<!-- 工具栏模板 -->
<br><br><br><br><br><br>
<style>
  .layui-row {
    margin-left: 63px;
  }
</style>
<form class="layui-form layui-row layui-col-space16">
  <div class="layui-col-sm3">
    <input type="text" name="seach" placeholder="请输入查询" class="layui-input">
  </div>

  <div class="layui-btn-container layui-col-xs12">
    <button class="layui-btn" lay-submit lay-filter="search">Search</button>
    <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
  </div>
</form>





<script type="text/html" id="toolbar">

    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
<!--        <button class="layui-btn layui-btn-sm" lay-event="delete_many">删除</button>-->
    </div>
</script>

<form class="layui-form" action="" id="form_edit" lay-filter="form_edit" style="margin-top: 20px;display: none">
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
            <input type="text" name="id" lay-verify="required" autocomplete="off" placeholder="请输入"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <select name="gender" lay-verify="required">
                <option value=""></option>
                <option value="M">男</option>
                <option value="F">女</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">班级</label>
        <div class="layui-input-block">
            <select name="class_name" lay-verify="required">
                <option value=""></option>
                <option value="一班">一班</option>
                <option value="二班">二班</option>
                <option value="三班">三班</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="mobile" lay-verify="required|phone" autocomplete="off" placeholder="请输入"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
            <textarea name="address" class="layui-textarea" placeholder="请输入地址"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="create_at" id="create-at"
                       placeholder="" autocomplete="off" lay-verify="required">
            </div>
        </div>
    </div>
    <div class="layui-form-item" pane>
        <label class="layui-form-label">禁用</label>
        <div class="layui-input-block">
            <input type="checkbox" name="disable" lay-skin="switch" lay-filter="switchTest" title="是|否">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="edit-commit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- 表头某列 templet 属性指向的模板 xiugai-->
<script type="text/html" id="tools">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div class="layui-container">
    <table class="layui-hide" id="student"></table>
</div>

<script src="/static/layui.js"></script>
<script>
    // 修改提交的方法
    const change_student = async (id, data) => {
        const options = {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        }
        const response = await fetch(`/api/student/${id}`, options)
        return await response.json()
    }


    // 新增提交的方法
    const del_student_api = async (id) => {
        const options = {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'},
        }
        const response = await fetch(`/api/student/${id}`, options)
        return await response.json()
    }




    layui.use(function () {
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        form.on('submit(search)', function(data){
             var field = data.field;   //得到搜索栏的所有的值
            // 执行重载
             table.reload('student', {
                page:{
                    curr:1
                },
                where: field     //传给后台数据并重载
            });

     return false; // 阻止默认 form 跳转
  });


        // var createTable = function (){
        //     table.init('student', {
        //         url: '/api/student',
        //         method:'GET',
        //         id:'student',
        //         page:true,
        //         toolbar: '#toolbar',
        //         cols: [
        //         [   // 标题栏
        //             {field: 'id', title: 'ID', width: 60, sort: true},
        //             {field: 'name', title: '姓名', width: 100},
        // //            {field: 'gender', title: '性别', width: 60, templet: render_gender},
        //             {field: 'class_name', title: '班级', width: 80},
        //             {field: 'mobile', title: '手机', width: 120},
        //             {field: 'address', title: '地址', minWidth: 160},
        //             {field: 'create_at', title: '创建时间', width: 200},
        //             {field: 'disable', title: '禁用', width: 100},
        //             {field: 'is_del', title: '删除', width: 80},
        //             {title: '操作', width: 120, templet: '#tools'}
        //         ]]
        //     })
        // }
        // 已知数据渲染
        var inst = table.render({
            elem: '#student',
            id: 'student',
            url: '/api/student',
             toolbar: '#toolbar',
            cols: [
                [   // 标题栏
                    {field: 'id', title: 'ID', width: 60, sort: true},
                    {field: 'name', title: '姓名', width: 100},
                   {field: 'gender', title: '性别', width: 60, templet: render_gender},
                    {field: 'class_name', title: '班级', width: 80},
                    {field: 'mobile', title: '手机', width: 120},
                    {field: 'address', title: '地址', minWidth: 160},
                    {field: 'create_at', title: '创建时间', width: 200},
                    {field: 'disable', title: '禁用', width: 100},
                    {field: 'is_del', title: '删除', width: 80},
                    {title: '操作', width: 120, templet: '#tools'}
                ]],
            page: true,
        });
        // var active ={
        //     reload :function (){
        //         table.reload('student', {
        //             url:'/api/student',
        //         page:{
        //             curr:1
        //         }
        //     });
        //     }
        // }

            // 头部工具栏事件
        table.on('toolbar(student)', function (obj) {
            var options = obj.config; // 获取当前表格属性配置项
            var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据

            // 根据不同的事件名进行相应的操作
            switch (obj.event) { // 对应模板元素中的 lay-event 属性值
                case 'add':
                    window.show_add()
                    break;
                case 'delete_many':
                    window.delete_many(obj)
                    break;
            }
        });

        // 单元格工具事件
        table.on('tool(student)', function (obj) {
        var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
        if (layEvent === 'edit') { //编辑
            window.show_edit(obj)
        } else if (layEvent === 'del') { //删除
            layer.confirm('确定删除吗？', function (index) {
                layer.close(index);
                window.del_student(obj)
            });
        }
    });

         // 日期时间选择器
        laydate.render({
            elem: '#create-at',
            type: 'datetime'
        });

        window.show_edit = (obj) => {
             console.log(obj.data)

            form.val('form_edit', obj.data);
             {#传入数据#}

            layer.open({
                type: 1,
                area: ['900px', '600px'],
                 {#content: '/student_update'#}
                content: $('#form_edit'), // 捕获的元素
            });
        }

        window.del_student = (obj) => {
            layer.msg('删除学生数据')
}

        // 提交事件
        form.on('submit(edit-commit)', function (data) {
            var field = data.field; // 获取表单字段值
            // console.log(field)
            // 此处可执行 Ajax 等操作
            field.disable = field?.disable ? true : false

            change_student(field.id, field).then(function (ret) {

                // 提交成功之后的回调
                if (!ret.code) {
                    layer.msg(ret.msg, {
                        icon: 1,
                        time: 1000,
                    }, function () {
                        layer.closeAll('page');
                        table.reload('student');
                    });
                } else {
                    layer.msg(ret.msg, {
                        icon: 2,
                        time: 1000,
                    });
                }
            })

            return false; // 阻止默认 form 跳转
        });

        window.show_add = function () {
    layer.open({
        type: 2,
        title: '新增学员',
        shadeClose: true,
        maxmin: true, //开启最大化最小化按钮
        area: ['900px', '600px'],
        content: '/student_add'
    });
}

        window.del_student = (obj) => {
            // console.log(obj)
            del_student_api(obj.data.id).then(function (ret) {
                // 提交成功之后的回调
                if (!ret.code) {
                    layer.msg(ret.msg, {
                        icon: 1,
                        time: 1000,
                    }, function () {
                        table.reload('student');
                    });
                } else {
                    layer.msg(ret.msg, {
                        icon: 2,
                        time: 1000,
                    });
                }
            })
        }


    });



    function render_gender(d) {
    if (d.gender === 'M') {
        return '<span style="color: blue">男</span>';
    } else {
        return '<span style="color: pink">女</span>';
    }

    // createTable()
}
</script>
</body>
</html>
